<template>
  <div>
    <!--
      必要属性
        action 指向请求地址, 如果要自定义, 就用 #
        fileList 管理图片数组
      样式相关
        list-type 照片墙形式
      钩子
        on-remove 图片被删钩子
        on-change 图片被改变(主要用来处理添加)
      上传相关
        before-upload 检验
        http-request 自定义上传方法
         :class 动态类名可以控制上传图标显示与否
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-remove="onRemove"
      :on-change="onChange"
      :http-request="upload"
      :class="{disable:fileList.length===limit}"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDrZ8TjndHhutgFnHWYLvISN8h9QSK0d6N',
  SecretKey: '94lGZgbHsNdeRzKQGrDNN9rMegT1JMAi'
})

export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    onRemove(file, newFileList) {
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },

    beforeUpload(file) {
      // 可以拦截上传
      console.log('上传前校验', file)
      const maxSize = 1 * 1024 * 1024
      if (file.size > maxSize) {
        this.$message.error('图片不能大于1M')
        return false
      }
    },
    upload(res) {
      console.log('真正上传', res)
      cos.putObject({
        Bucket: 'hr-project-1313158788', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: res.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD',
        Body: res.file // 上传文件对象
      // onProgress: function(progressData) {
      //   console.log(JSON.stringify(progressData))
      // }
      }, (err, data) => {
        console.log(err || data)
        if (!err) {
          console.log('上传成功')
          // 修改 fileList 将腾讯云的地址存起来备用
          this.fileList.forEach(element => {
          // 根据 uid 找出当前正在上传的图片 修改路径和状态
            if (element.uid === res.file.uid) {
              element.url = 'https://' + data.Location
              element.status = 'success'
            }
          })
        }
      })
    }
  }
}

</script>

<style lang='scss' scoped>
.disable {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
